<template>
  <div>
    <div>
      <img :src="imgPath" :style="imgcss">
    </div>
    用户名：<input type="text" v-model="userObj.userName"/><br>
    密码：<input type="password" v-model="userObj.pwd"/><br>
    <input type="button" value="登陆" @click="land()">
    <input type="button" value="确定" @click="ok()">
    <input type="button" value="改变样式" @click="changeStyle()">
    <hr/>

    单价：{{price}}<br>
    数量：<input type="text" v-model="num"><br>
    总价：{{price * num}}
    <hr/>

    {{age >= 18 ? "成年" : "未成年"}}
    <hr/>

    单选框：<br>
    性别：<input type="radio" value="男" v-model="sex">男
         <input type="radio" value="女" v-model="sex">女<br>
    {{sex}}
    <hr/>

    下拉框：
    <select v-model="edu">
      <option value="gz">高中</option>
      <option value="dz">大专</option>
      <option value="bk">本科</option>
    </select>
    {{edu}}
    <input type="button" value="改变选项" @click="changeItem()">
    <hr/>

    复选框：<br>
    <input type="checkbox" value="体育" v-model="likeArray">体育
    <input type="checkbox" value="音乐" v-model="likeArray">音乐
    <input type="checkbox" value="美术" v-model="likeArray">美术
    <input type="checkbox" value="上网" v-model="likeArray">上网
    <input type="checkbox" value="舞蹈" v-model="likeArray">舞蹈<br>
    {{likeArray}}
    <hr/>

    工资：<input type="text" ref="money"><br>
    <input type="button" value="获取值" @click="showValue()">
    <hr/>

    成绩：{{grade}}<br>
    是否合格：<span v-if="grade >= 60">合格</span>
            <span v-else>不合格</span><br>
    等级：<span v-if="grade >= 90">优</span>
    <span v-else-if="grade >= 80">良</span>
    <span v-else-if="grade >= 60">中</span>
    <span v-else>差</span>
    <hr/>

    <table border="1" width="80%" cellspacing="0">
      <thead>
      <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>工资</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
        <tr v-for="(em,index) in emList" :key="em.id">
          <td>{{index}}</td>
          <td>{{em.id}}</td>
          <td>{{em.name}}</td>
          <td>{{em.money}}</td>
          <td>{{em.status}}</td>
          <td><input type="button" v-if="em.status == '在职'" value="离职"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgPath:require("./img/1.jpg"),
      userObj: {},
      imgcss: {width: '200px', height: '200px'},
      price:30,
      num:1,
      age:17,
      sex:"男",
      edu:"gz",
      likeArray:[],
      grade:50,
      emList:[
        {id:1,name:"coco",money:6000,status:"在职"},
        {id:3,name:"xx",money:4500,status:"离职"},
        {id:4,name:"jean",money:8000,status:"在职"},
        {id:6,name:"nana",money:7500,status:"在职"},
        {id:9,name:"tom",money:6000,status:"在离职"}
      ]
    }
  },
  methods: {
    land() {
      // alert(JSON.stringify(this.userObj));
      if (this.userObj.userName == "coco" && this.userObj.pwd == "111") {
        // alert("登陆成功");
        // //清空文本框内容
        // this.userObj = {};

        // this.$router.push("/index");

        //经路由跳转首页，并传递参数
        //name：表示注册的路由名称，params：描述传递参数
        this.$router.push({name:"Index",params:{id:2,name:"coco"}});
      } else {
        alert("登陆失败");
      }
    },
    ok() {
      alert("确定");
    },
    changeStyle() {
      this.imgcss.width = "300px";
      this.imgcss.height = "300px";
    },
    changeItem(){
      this.edu = "bk";
    },
    showValue(){
      alert(this.$refs.money.value),
          this.$refs.money.style.color = "blue";
    }
  }
}
</script>

<style scoped>

</style>